<template>
  <view class="">
    <uni-nav-bar title="绑卡记录" left-icon="left" @clickLeft="navBack" :fixed="true" statusBar></uni-nav-bar>
    <scroll-view
      scroll-y="true"
      enable-back-to-top
      @scrolltolower="loadMore"
      class="scroll-box"
      :style="{ height: pageHeight + 'px' }"
    >
      <view class="cardlist" v-for="(item, index) in Exchange" :key="index">
        <view class="cardlist_top">
          <view class="">
            <text>{{ item.cate }}</text>
            <text>{{ item.type }}</text>
          </view>
          <view class="">{{ item.money }}</view>
        </view>
        <view class="cardlist_bottom">
          <view class="">{{ item.card_code }}</view>
          <view class="" style="font-size: 24rpx;">{{ item.createtime }}</view>
        </view>
      </view>
      <view v-if="Exchange.length < 1" class="fillings" :style="{ height: pageHeight + 'px' }">
        <image :src="Empty2"></image>
        <text>暂无兑换记录</text>
      </view>
    </scroll-view>
  </view>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { navBack } from '@/utils/navigator';
import { showLoading } from '@/utils/prompt';
import { bindingRecord } from '@/gql/user';
import { getDriverID } from '@/stores/driverID';
import { toPublish } from '@mqtt';
import { isH5 } from '@/utils/platform';
import { Empty2} from '@/utils/Static';
const driver_id = getDriverID();
const Exchange = ref([]);
const page = ref(1);
const lastpage = ref(1);
const pageHeight = ref('');
onMounted(() => {
  const num = isH5 ? 55 : 88;
  uni.getSystemInfo({
    success: function(res) {
      pageHeight.value = (res.windowHeight - num).toString();
    },
  });
});
getList();
function getList() {
  showLoading('加载中...');
  const payload = {
    query: bindingRecord,
    variables: {
      driver_id,
      page: page.value,
    },
  };
  toPublish('ql/driver/cardList', payload, (obj) => {
    Exchange.value = [...Exchange.value, ...obj.data.card_list.list];
    lastpage.value = obj.data.card_list.lastpage;
  });
}
/**
 * 加载更多
 */
function loadMore() {
  if (lastpage.value > page.value) {
    page.value++;
    getList();
  }
}
</script>

<style scoped lang="less">
.cardlist {
  width: 96%;
  margin: 15rpx auto;
  background-color: white;
  padding: 20rpx;
  box-sizing: border-box;
  border-radius: 5px;
  box-shadow: 0px 0px 51px 0px rgba(179, 179, 179, 0.44);
  .cardlist_top {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    view:nth-of-type(1) {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      text:nth-of-type(1) {
        font-size: 30rpx;
        font-family: Source Han Sans CN;
        font-weight: 500;
        color: #333333;
      }
      text:nth-of-type(2) {
        padding: 2rpx 10rpx;
        box-sizing: border-box;
        background: #e8f4ff;
        border-radius:5px;
        font-size: 18rpx;
        font-family: Source Han Sans CN;
        font-weight: 500;
        color: #333333;
        margin-left: 10rpx;
      }
    }
    view:nth-of-type(2) {
      font-size: 38rpx;
      font-family: Source Han Sans CN;
      font-weight: 500;
      color: #333333;
    }
  }
  .cardlist_bottom {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 15rpx;
    view {
      font-size: 26rpx;
      font-family: Source Han Sans CN;
      font-weight: 500;
      color: #333333;
    }
  }
}
.fillings {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  image {
    width: 352rpx;
    height: 352rpx;
    margin-top: -140rpx;
  }
  text {
    font-size: 24rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #999999;
    margin-top: 20rpx;
  }
}
</style>
